<template>
  <div class="mb-3 lg:mt-7 lg:mb-7 w-full lg:w-100 lg:mx-auto lg:flex lg:justify-between">
    <div
      v-for="(module, idx) in currentModuleInfo"
      class="mb-3 relative lg:mb-2.5 lg:flex-1 lg:mr-5 lg:pr-4 last:pr-0 last:mr-0">
      <!--        顶部-->
      <div class="box-border flex items-center justify-between pb-3 lg:pb-5 pl-3.5 lg:pl-0">
        <y-image width="24" height="24" class="mr-2.5 rtl:ml-2.5" v-if="module.smallIcon" :src="module.smallIcon" />
        <h2 class="text-xl uppercase font-bold lg:text-lg text-white lg:text-[#fff]">
          {{ module.name }}
        </h2>
        <nuxt-link
          class="mr-3 hover:underline ml-auto lg:mr-2 items-center flex cursor-pointer text-xs lg:text-sm lg:font-medium text-[#929495]"
          v-if="module.targetUrl"
          :to="$localePath(module.targetUrl)"
          external>
          {{ $mt('View More') }}
        </nuxt-link>
      </div>
      <!--      pc 商品列表-->
      <div class="hidden lg:grid grid-cols-3 gap-y-4 gap-x-6">
        <NewHomGoodsList
          :lazy-image="lazyImage"
          v-for="(item, index) in module?.goodsList"
          :key="index"
          :hotGoodsInfo="[item]" />
      </div>
      <div class="w-full flex overflow-auto -mb-2 lg:hidden px-2.5">
        <NewHomGoodsList
          class="ltr:pr-3 rtl:pl-3 shrink-0 w-[180px]"
          v-for="(goodsCollection, index) in chunk(module?.goodsList, 3)"
          :key="index"
          :lazy-image="lazyImage"
          :hotGoodsInfo="goodsCollection" />
      </div>
      <div v-if="idx === 0" class="w-0.5 hidden lg:block absolute inset-0 left-auto linear-line"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { chunk } from '~/utils'
import NewHomGoodsList from '~/components/home/NewHomGoodsList.vue'
import YImage from '~/components/logic/YImage.vue'
import WIcon from '~/components/logic/WIcon.vue'

const i18n = useI18n()
const props = defineProps(['currentModuleInfo', 'lazyImage'])
</script>

<style scoped lang="scss">
.linear-line {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.3) 10%,
    rgba(255, 255, 255, 0.3) 90%,
    transparent
  );
}
</style>
